<div class="row">
    <div class="col-md-12">
        <div class="panel panel-primary">
            <div class="panel-heading">
                <div class="panel-title">Morris Charts</div>
                <div class="panel-options">
                    <a href="#sample-modal" data-toggle="modal" data-target="#sample-modal-dialog-1" class="bg"><i class="entypo-cog"></i></a>
                    <a href="#" data-rel="collapse"><i class="entypo-down-open"></i></a>
                    <a href="#" data-rel="reload"><i class="entypo-arrows-ccw"></i></a>
                    <a href="#" data-rel="close"><i class="entypo-cancel"></i></a>
                </div>
            </div>
            <table class="table table-bordered">
                <tbody>
                    <tr>    
                        <td>
                            <div id="container-<?php echo $this->id; ?>" style="min-width: 310px; height: 400px; margin: 0 auto"></div>
                        </td>
                    </tr>
                </tbody>
            </table>
        </div>
    </div>
</div>
<script type="text/javascript">
    $(function () {
        $('#container-<?php echo $this->id; ?>').highcharts({
            title: {
                text: '<?php echo $this->title; ?>',
                x: -20 //center
            },
            subtitle: {
                text: '<?php echo $this->subtitle; ?>',
                x: -20
            },
            xAxis: {
                categories: <?php echo json_encode($this->categories); ?>
            },
            yAxis: {
                title: {
                    text: '<?php echo $this->yTitle; ?>'
                },
                plotLines: [{
                        value: 0,
                        width: 1,
                        color: '#808080'
                    }]
            },
            tooltip: {
                valueSuffix: '<?php echo $this->valueSuffix; ?>'
            },
            legend: {
                layout: 'vertical',
                align: 'right',
                verticalAlign: 'middle',
                borderWidth: 0
            },
            series: <?php echo $this->getChartData(); ?>
        });
    });
</script>